<template>
    <div class="container yuan-container">

        <a-card title="对接审核">
            <div class="filter-panel">
                <div class="filter-list">
                    <span>成果名称：</span>
                    <a-input-search allowClear v-model="pageParams.achievementName" placeholder="请输入成果名称" @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>成果类别：</span>
                    <a-select v-model="pageParams.achievementCategory" @change="resetList" allowClear placeholder="请选择成果类别">
                        <a-select-option value="发明专利">发明专利</a-select-option>
                        <a-select-option value="实用新型专利">实用新型专利</a-select-option>
                        <a-select-option value="外观设计专利">外观设计专利</a-select-option>
                        <a-select-option value="技术">技术</a-select-option>
                        <a-select-option value="软件著作权">软件著作权</a-select-option>
                        <a-select-option value="版权等其他著作权">版权等其他著作权</a-select-option>
                        <a-select-option value="集成电路布图设计">集成电路布图设计</a-select-option>
                        <a-select-option value="植物新品种">植物新品种</a-select-option>
                        <a-select-option value="其他">其他</a-select-option>
                    </a-select>
                </div>
                <div class="filter-list">
                    <span>所属技术类别：</span>
                    <a-select v-model="pageParams.belongToTechnologyCategory" @change="resetList" allowClear
                        placeholder="请选择所属技术类别">
                        <a-select-option v-for="item in territoryList" :value="item.content"
                            :key="item.id">{{item.content}}</a-select-option>
                    </a-select>
                </div>

            </div>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id" :columns="columns" :data-source="pageList"
                    :pagination="pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-button type="primary" @click="clickShow(record)" v-if="$utilCheckPermission(['abutmentAuditDetail'])">查看</a-button>
                            <a-button style="margin-left:10px" type="warning" @click="clickAuth(record,false)"
                                v-if="record.abutmentAuditState===0 && $utilCheckPermission(['abutmentAuditAudit'])">审核</a-button>

                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <AuthVue :visible="detailVisible" @closeModal="() => detailVisible = false" @resetList="getList" :isShow="isShow"
            :detailInfo="detailInfo" />
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { h } from "vue";
import { Component, Vue } from "vue-property-decorator";
import AuthVue from "./auth.vue";
@Component({
    name: "tpl",
    components: { AuthVue },
})
export default class extends Vue {
    loading = false;
    pageList = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    pageParams = {};
    columns: any[] = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "achievementPrincipal",
            key: "achievementPrincipal",
            title: "成果负责人",
        },
        {
            align: "center",
            dataIndex: "achievementName",
            key: "achievementName",
            title: "成果名称",
        },
        {
            align: "center",
            dataIndex: "demandName",
            key: "demandName",
            title: "对接需求",
        },
        {
            align: "center",
            dataIndex: "investmentMin",
            key: "investmentMin",
            title: "拟投入金额",
            customRender: (text: string, record: any, index: number) => {
                if (record.investmentMin === null) return "--";
                return record.investmentMin + "-" + record.investmentMax + "万元";
            },
        },
        {
            align: "center",
            dataIndex: "achievementCategory",
            key: "achievementCategory",
            title: "成果类别",
        },
        {
            align: "center",
            dataIndex: "belongToTechnologyCategory",
            key: "belongToTechnologyCategory",
            title: "所属技术类别",
            customRender: (text: string, record: any, index: number) => {
                if (record.belongToTechnologyCategory === null) return "--";
                return JSON.parse(record.belongToTechnologyCategory).join(",");
            },
        },
        {
            align: "center",
            dataIndex: "abutmentTime",
            key: "abutmentTime",
            title: "对接成果时间",
        },
        {
            align: "center",
            dataIndex: "abutmentAuditState",
            key: "abutmentAuditState",
            title: "状态",
            customRender: (text: string, record: any, index: number) => {
                const data = {
                    0: { title: "待审核", class: "status-words c-primary" },
                    1: { title: "已通过", class: "status-words c-success" },
                    2: { title: "已驳回", class: "status-words c-danger" },
                };
                const dataOne = data[record.abutmentAuditState] || {};
                const dom = h("div", { class: dataOne.class }, dataOne.title);
                return dom;
            },
        },

        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 340,
            scopedSlots: { customRender: "action" },
        },
    ];

    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await api.findAbutmentDetails({
                pageNum: this.pagination.current,
                pageSize: this.pagination.pageSize,
                ...this.pageParams
            });

            this.pageList = res.data?.rows ||[];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    mounted() {
        this.loading = true;
        Promise.all([this.getTerritoryList()]).then(() => {
            this.loading = false;
            this.getList();
        });
    }

    detailVisible = false;
    isShow = false;
    detailInfo: any = {};
    async getDetailInfo(id) {
        this.loading = true;
        try {
            const res = await api.findAbutmentDetails({ id });
            this.detailInfo = res.data;
        } finally {
            this.loading = false;
        }
    }
    async clickAuth(item) {
        await this.getDetailInfo(item.id);
        this.isShow = false;
        this.detailVisible = true;
    }
    async clickShow(item) {
        await this.getDetailInfo(item.id);
        this.isShow = true;
        this.detailVisible = true;
    }

    territoryList = [];
    async getTerritoryList() {
        try {
            const res = await api.getSetting("3");
            this.territoryList = res.data;
        } finally {
            //this.loading = false;
        }
    }
}
</script>
<style scoped lang="scss">
.container {
}
</style>
